<template>
	<d2-container
		v-loading="loading"
		:class="{ 'page-compact': crud.pageOptions.compact }"
	>
		<d2-crud-x
			ref="d2Crud"
			@userBlack="userBlack"
			@is_userBlack="is_userBlack"
			@setLabel="setLabel"
			@setRemake="setRemake"
			v-bind="_crudProps"
			v-on="_crudListeners"
		>
			<div slot="header">
				<el-tabs
					v-model="activeName"
					@tab-click="handelClickTabs"
					class="officialTabs"
				>
					<el-tab-pane
						v-for="i in official"
						:label="i.name"
						:key="i.id"
						:name="String(i.id)"
					>
					</el-tab-pane>
				</el-tabs>
				<crud-search
					ref="search"
					:options="crud.searchOptions"
					@submit="handleSearch"
				/>
				<el-button size="small" type="primary" @click="handelSync()">
					同步粉丝
				</el-button>
				<el-button
					v-show="false"
					size="small"
					type="primary"
					@click="addRow"
					><i class="el-icon-plus" /> 新增</el-button
				>
				<el-button
					size="small"
					type="primary"
					@click="dictionaryConfigure()"
				>
					标签管理
				</el-button>
				<el-button
					size="small"
					type="primary"
					v-for="(i, index) in isBatchList"
					@click="batchList(index)"
				>
					{{ i }}
				</el-button>
				<el-button
					v-show="is_BlackShow"
					size="small"
					type="danger"
					@click="batchBlack(0)"
				>
					批量拉黑
				</el-button>

				<el-button
					v-show="is_BlackShows"
					size="small"
					type="warning"
					@click="batchBlack(1)"
				>
					批量取消拉黑
				</el-button>

				<crud-toolbar
					:search.sync="crud.searchOptions.show"
					:compact.sync="crud.pageOptions.compact"
					:columns="crud.columns"
					@refresh="doRefresh()"
					@columns-filter-changed="handleColumnsFilterChanged"
				/>
			</div>
			<template slot="fan_tags_listSlot" slot-scope="scope">
				<el-tag
					:style="{ marginRight: '8px' }"
					type="success"
					v-for="i in scope.row.fan_tags_list"
					>{{ i.name }}</el-tag
				>
			</template>
			<template slot="head_portraitSlot" slot-scope="scope">
				<img
					:style="{ width: '70px', borderRadius: '100%' }"
					:src="urlImage(scope.row)"
					alt="图片加载错误"
				/>
			</template>
		</d2-crud-x>
		<el-drawer :visible.sync="drawer" class="fansManage" size="28%">
			<div slot="title">
				<span>标签管理</span>
			</div>
			<sync-labels
				style="margin-top: 80px; margin-left: 10px"
				@handel_label="handel_label()"
				:dictionaryRow="dictionaryRow"
				:fans_item="fans_item"
			></sync-labels>
		</el-drawer>
		<el-dialog
			:title="dialogTitle"
			:close-on-click-modal="false"
			:visible.sync="dialogFormVisible"
			modal-append-to-body
			width="30%"
			@closed="handleCloses"
		>
			<el-select v-model="black_value" multiple placeholder="请选择">
				<el-option
					v-for="item in options"
					:key="item.open_id"
					:label="item.name"
					:value="item.open_id"
				>
				</el-option>
			</el-select>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="handelUserBlack()">{{
					dialogTitle
				}}</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:title="listTitle"
			modal-append-to-body
			:modal="false"
			:visible.sync="outerVisible"
			width="35%"
			@closed="handleCloses"
		>
			<el-select
				style="width: 85%"
				multiple
				v-model="black_value"
				placeholder="请选择"
			>
				<el-option
					v-for="item in options"
					:key="item.tagsid"
					:label="item.name"
					:value="item.tagsid"
				>
				</el-option>
			</el-select>
			<div slot="footer" class="dialog-footer">
				<el-button @click="outerVisible = false">取 消</el-button>
				<el-button
					v-show="isShow"
					type="primary"
					@click="handelUserBlack()"
					v-loading="is_loading"
					>确定</el-button
				>
				<el-button
					type="primary"
					v-show="isShows"
					@click="handelUserBlackAll()"
					v-loading="is_loading"
					>确定</el-button
				>
			</div>
		</el-dialog>
		<el-dialog
			title="修改备注"
			modal-append-to-body
			:modal="false"
			:visible.sync="is_remake"
			width="45%"
			@closed="handleRemarkCloses"
		>
			<el-input
				type="textarea"
				:rows="7"
				placeholder="请输入备注"
				v-model="textarea"
			>
			</el-input>
			<div slot="footer" class="dialog-footer">
				<el-button @click="is_remake = false">取 消</el-button>
				<el-button
					type="primary"
					v-loading="is_loading"
					@click="handelSetRemark()"
					>确认修改</el-button
				>
			</div>
		</el-dialog>
	</d2-container>
</template>
<script>
import * as api from "./api";
import { crudOptions } from "./crud";
import { d2CrudPlus } from "d2-crud-plus";
import SyncLabels from "./SyncLabels/index.vue";
export default {
	name: "tenantClient",
	components: { SyncLabels },
	mixins: [d2CrudPlus.crud],
	data() {
		return {
			is_setremark: {},
			textarea: "",
			listTitle: "",
			is_blacks: 1,
			activeName: "",
			managesTitle: "",
			dialogTitle: "",
			black: "",
			dictionaryRow: "",
			official: [],
			options: [],
			black_value: [],
			fans_item: [],
			black_item: [],
			openIdAll: [],
			manage: ["标签管理", "黑名单"],
			isBatchList: ["批量打标签", "批量取消标签"],
			dialogFormVisible: false,
			outerVisible: false,
			drawer: false,
			drawers: false,
			loading: false,
			drawerShow: false,
			isShow: false,
			isShows: false,
			is_remake: false,
			is_loading: false,
			is_BlackShow: true,
			is_BlackShows: true,
		};
	},

	async beforeRouteEnter(to, from, next) {
		const res = await api.OfficialObj();
		next((vm) => {
			vm.official = res.data.data;
			vm.activeName = String(res.data.data[0].id);
		});
	},
	methods: {
		urlImage(e) {
			if (e.head_portrait == "") {
				return "https://tse1-mm.cn.bing.net/th/id/OIP-C.CJ3bq9fXwhgPUrZJ55RbpwAAAA?w=175&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7";
			} else {
				return e.head_portrait;
			}
		},
		//修改备注
		setRemake(e) {
			this.textarea = e.row.remark;
			this.is_remake = true;
			this.is_setremark = e;
		},
		//备注修改确定
		handelSetRemark() {
			this.is_loading = true;
			if (this.textarea != "") {
				this.SetRemark({
					openid_list: [this.is_setremark.row.open_id],
					official_account_management_id: this.activeName,
					remark: this.textarea,
				}).then(() => {
					this.$message({
						message: "修改备注成功!",
						type: "success",
					});
					this.is_loading = false;
					this.is_remake = false;
					this.doRefresh();
				});
			} else {
				this.$message({
					message: "请填写备注再进行修改!",
					type: "danger",
				});
			}
		},
		//备注取消清空
		handleRemarkCloses() {
			this.textarea = "";
		},
		//点击多选框数据
		handleSelectionChange(e) {
			this.openIdAll = e.records;
		},
		//设置标签
		setLabel(e) {
			this.is_blacks = 1;
			this.listTitle = "设置标签";
			this.isShow = true;
			this.isShows = false;
			this.outerVisible = true;
			this.$emit("outerVisible", true);
			const query = this.crud.page;
			e.row.fan_tags_list.forEach((item) =>
				this.black_value.push(String(item.tagsid))
			);
			this.GetListRequest(query).then(
				(res) => (this.options = res.data.data)
			);
			this.openId = [e.row.open_id];
		},
		//批量设置标签
		batchList(index) {
			if (index == 1) {
				this.is_blacks = 0;
				this.listTitle = "取消标签";
			} else {
				this.is_blacks = 1;
				this.listTitle = "设置标签";
			}
			this.isShow = false;
			this.isShows = true;
			this.outerVisible = true;
			const query = this.crud.page;
			if (this.is_blacks == 0) {
				this.openIdAll.forEach((item) => {
					return (this.options = this.options.concat(
						item.fan_tags_list
					));
				});
				let obj = {};
				this.options = this.options.reduce(
					(pre, cur) =>
						obj[cur.id]
							? pre
							: (obj[cur.id] = true && [...pre, cur]),
					[]
				);
			} else {
				this.GetListRequest(query).then(
					(res) => (this.options = res.data.data)
				);
			}
		},

		//标签确定
		handelUserBlack() {
			this.is_loading = true;
			this.TagListRequest({
				openid_list: this.openId,
				official_account_management_id: this.activeName,
				is_black: this.is_blacks,
				tagid_list: this.black_value,
				is_one: 1,
			}).then(() => {
				this.outerVisible = false;
				this.is_loading = false;
				this.$message({
					type: "success",
					message: "已成功",
				});
				this.doRefresh();
			});
			// }
		},
		//多选标签确定
		handelUserBlackAll() {
			let isOpenidAll = [];
			this.openIdAll.forEach((item) => isOpenidAll.push(item.open_id));
			if (this.black_value.length == 0 || isOpenidAll.length == 0) {
				this.$message({
					type: "warning",
					message: "您未选择数据或者标签",
				});
			} else {
				this.is_loading = true;
				this.TagListRequest({
					openid_list: isOpenidAll,
					official_account_management_id: this.activeName,
					is_black: this.is_blacks,
					tagid_list: this.black_value,
					is_one: 0,
				}).then(() => {
					this.outerVisible = false;
					this.$message({
						type: "success",
						message: "已成功",
					});
					this.is_loading = false;
					this.doRefresh();
				});
			}
		},
		getCrudOptions() {
			return crudOptions(this);
		},
		pageRequest(query) {
			let _that = this;
			if (_that.getSearch().getForm().is_black == 0) {
				_that.is_BlackShow = false;
				_that.is_BlackShows = true;
			} else if (_that.getSearch().getForm().is_black == 1) {
				_that.is_BlackShow = true;
				_that.is_BlackShows = false;
			} else if (!_that.getSearch().getForm().is_black) {
				_that.is_BlackShow = true;
				_that.is_BlackShows = true;
			}
			return api.GetList(query, _that.activeName);
		},
		addRequest(row) {
			return api.createObj(row);
		},
		updateRequest(row) {
			return api.UpdateObj(row);
		},
		delRequest(row) {
			return api.DelObj(row.id);
		},
		OfficialRequest() {
			return api.OfficialObj();
		},
		SysnRequest(query) {
			return api.fan_Sync(query, this.activeName);
		},
		ListRequest(query) {
			return api.ListSyncUrl(query, this.activeName);
		},
		GetListRequest(query) {
			return api.syncList(query, this.activeName);
		},
		TagListRequest(obj) {
			return api.syncTagList(obj);
		},
		BlackListRequest(obj) {
			return api.BlackListUrl(obj);
		},
		isBlackNo(query) {
			return api.isBlackListUrl(query, this.activeName);
		},
		SetRemark(obj) {
			return api.RemarkUrl(obj);
		},
		doAfterRowChange() {
			this.$store.dispatch("d2admin/fansManage/_tags");
		},
		doAfterRowChange_black() {
			this.$store.dispatch("d2admin/fansManage/_blacks");
		},
		//公众号同步粉丝
		handelSync() {
			this.loading = true;
			this.SysnRequest()
				.then(() => {
					this.loading = false;
					this.$message({
						type: "success",
						message: "同步成功",
					});
					this.doRefresh();
				})
				.catch(() => {
					this.loading = false;
					this.$message({
						type: "error",
						message: "同步失败",
					});
				});
		},
		// 标签管理
		dictionaryConfigure() {
			this.ListRequest().then((res) => (this.fans_item = res.data.data));
			this.drawer = true;
			this.dictionaryRow = this.activeName;
		},
		//黑名单管理
		handelBlack() {
			this.black_item = [];
			this.drawers = true;
			this.dictionaryRow = this.activeName;
		},
		// dialog关闭回调
		handleCloses() {
			this.black_value = [];
			this.options = [];
		},
		//封装拉黑接口函数
		fnBlackList(e, blacks, titles, type) {
			this.BlackListRequest({
				openid_list: [e.row.open_id],
				official_account_management_id: this.activeName,
				is_black: blacks,
			}).then(() => {
				this.$message({
					type: type,
					message: titles,
				});
				this.loading = false;
				this.doRefresh();
			});
		},
		//用户拉黑
		userBlack(e) {
			this.is_blacks = 0;
			this.$confirm("是否确认拉黑此用户?", "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.loading = true;
				this.fnBlackList(e, this.is_blacks, "已成功拉黑", "success");
			});
		},
		//取消拉黑
		is_userBlack(e) {
			this.is_blacks = 1;
			this.$confirm("是否确认将此用户从黑名单中取消?", "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.loading = true;
					this.fnBlackList(
						e,
						this.is_blacks,
						"已取消拉黑",
						"warning"
					);
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消操作",
					});
				});
		},
		//批量拉黑
		batchBlack(index) {
			let title = "";
			let types = "";
			let titles = "已全部成功拉黑";
			if (index == 0) {
				title = "是否将选中的用户进行拉黑";
				types = "success";
				titles = "已全部取消拉黑";
			} else if (index == 1) {
				title = "是否将选中的用户移除黑名单";
				types = "warning";
			}
			this.$confirm(title, "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				let batchOpenId = [];
				this.openIdAll.forEach((item) =>
					batchOpenId.push(item.open_id)
				);
				if (batchOpenId.length == 0) {
					this.$message({
						message: "请选择数据!",
						type: "danger",
					});
				} else {
					this.loading = true;
					this.BlackListRequest({
						openid_list: batchOpenId,
						official_account_management_id: this.activeName,
						is_black: index,
					}).then(() => {
						this.$message({
							type: types,
							message: titles,
						});
						this.loading = false;
						this.doRefresh();
					});
				}
			});
		},
		//公众号切换
		handelClickTabs(tab) {
			this.activeName = tab._props.name;
			const query = this.crud.page;
			this.pageRequest(query).then(() => this.doRefresh());
		},
	},
};
</script>
<style lang="scss">
.fansManage .el-drawer__header {
	padding-bottom: 10px !important;
}
.officialTabs {
	padding: 10px;
}
</style>
